import React, { FC } from "react";
import styles from "./styles.module.less";
import time from "@/assets/time.svg";

const Home: FC = () => {
  return (
    <>
      <section className={styles.col1}>
        <div className={styles["background-media"]}></div>
        <div className={styles["background-color"]}></div>
        <div className={styles.content}>
          <div className={styles.row}>
            <div className={`${styles.left} `} id="col1-left">
              <div className={styles.leftWrap}>
                <h1>
                  <span
                    style={{
                      fontSize: 74,
                      color: "#fff",
                      fontWeight: "normal",
                    }}
                  >
                    企业数字化平台
                  </span>
                </h1>
                <div className={styles.desc}>
                  <span style={{ fontSize: 18 }}>
                    打造企业级云原生PaaS+SaaS平台，帮助客户轻松用云、快速创新、持续迭代。
                  </span>
                </div>
                <div className={styles.btn}>
                  <button>免费体验</button>
                </div>
              </div>
            </div>
            <div
              className={styles.right}
              style={{ width: "46.4%" }}
              id="col1-right"
            >
              <div className={styles.rightWrap}>
                <img
                  className={styles.front_image}
                  src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi80YTkwZDQ3YjdhZTczODk1ODRkMjJlMTI2Y2ViOTg5ZC5wbmc_p_p100_p_3D.png"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col2}>
        <div className={styles["background-color"]}></div>
        <div className={`${styles.container} ${styles.target}`}>
          <div className={`${styles.row} ${styles.targetRow}`} id="col2-row">
            <div className={styles.headerTitle}>我们的目标</div>
            <div className={styles.too}>
              当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为起飞页提供了海量精美网站模板和成品网站。
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col3}>
        <div className={styles["background-color"]}></div>
        <div className={`${styles.container} ${styles.tabs}`}>
          <div className={`${styles.row} ${styles.tabsRow}`} id="col3-row">
            <div className={styles.tabItem}>
              <div className={styles.content}>
                <div className={styles.icon}>
                  <img src={time} style={{ width: 40, marginBottom: 10 }} />
                </div>
                <div className={styles.title}>
                  <span style={{ fontSize: 22, color: "#000" }}>省时间</span>
                </div>
                <div className={styles.desc}>
                  <span style={{ color: "#666" }}>
                    您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素
                  </span>
                </div>
              </div>
            </div>
            <div className={styles.tabItem}>
              <div className={styles.content}>
                <div className={styles.icon}>
                  <img src={time} style={{ width: 40, marginBottom: 10 }} />
                </div>
                <div className={styles.title}>
                  <span style={{ fontSize: 22, color: "#000" }}>省时间</span>
                </div>
                <div className={styles.desc}>
                  <span style={{ color: "#666" }}>
                    您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素
                  </span>
                </div>
              </div>
            </div>
            <div className={styles.tabItem}>
              <div className={styles.content}>
                <div className={styles.icon}>
                  <img src={time} style={{ width: 40, marginBottom: 10 }} />
                </div>
                <div className={styles.title}>
                  <span style={{ fontSize: 22, color: "#000" }}>省时间</span>
                </div>
                <div className={styles.desc}>
                  <span style={{ color: "#666" }}>
                    您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col4}>
        <div className={styles["background-media"]}></div>
        <div className={styles["background-color"]}></div>
        <div className={`${styles.container} ${styles["col4-con"]}`}>
          <div className={`${styles.row} ${styles["col4-row"]}`} id="col4-row">
            <div className={styles.title}>看看我们的价值观</div>
            <div className={styles.headerTitle}>进一步了解我们</div>
            <div className={styles.playVideo}>
              <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi8zNzc0MGY0MWQ1NjI4YjQ4NzU3NzI2ZTNjNDFlNThjOC04MHg4MC5wbmc_p_p100_p_3D.png" />
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col5}>
        <div className={styles["background-color"]}></div>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.left} id="col5-left">
              <div className={styles.leftWrap}>
                <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi9mY2YzYTM4ZDc5YTUxZTY3MTUzOWQxNjMxYTY5YmY4Yy5wbmc_p_p100_p_3D.png" />
              </div>
            </div>
            <div className={styles.right} id="col5-right">
              <div className={styles.headerTitle}>软件平台核心优势</div>
              <div className={styles.minus}>
                <div className={`${styles.minuItem} ${styles.active}`}>
                  <h4 className={styles["panel-title"]}>
                    <div
                      className={styles["toggle-icon"]}
                      style={{ float: "left" }}
                    >
                      <i className="iconfont icon-jianhao_o panel-icon"></i>
                    </div>
                    <div className={styles["toggle-heading"]}>我们是谁</div>
                    <div style={{ clear: "both" }}></div>
                  </h4>
                  <section className={`${styles["panel-text"]}`}>
                    当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案、自由拖拽的可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。
                  </section>
                </div>
                <div className={`${styles.minuItem} `}>
                  <h4 className={styles["panel-title"]}>
                    <div
                      className={styles["toggle-icon"]}
                      style={{ float: "left" }}
                    >
                      <i className="iconfont icon-jiahao panel-icon"></i>
                    </div>
                    <div className={styles["toggle-heading"]}>
                      我们的价值观是什么
                    </div>
                    <div style={{ clear: "both" }}></div>
                  </h4>
                  <section className={`${styles["panel-text"]}`}>
                    当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案、自由拖拽的可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。
                  </section>
                </div>
                <div className={`${styles.minuItem} `}>
                  <h4 className={styles["panel-title"]}>
                    <div
                      className={styles["toggle-icon"]}
                      style={{ float: "left" }}
                    >
                      <i className="iconfont icon-jiahao panel-icon"></i>
                    </div>
                    <div className={styles["toggle-heading"]}>
                      我们的哲学是什么
                    </div>
                    <div style={{ clear: "both" }}></div>
                  </h4>
                  <section className={`${styles["panel-text"]}`}>
                    当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案、自由拖拽的可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。
                  </section>
                </div>{" "}
                <div className={`${styles.minuItem} `}>
                  <h4 className={styles["panel-title"]}>
                    <div
                      className={styles["toggle-icon"]}
                      style={{ float: "left" }}
                    >
                      <i className="iconfont icon-jiahao panel-icon"></i>
                    </div>
                    <div className={styles["toggle-heading"]}>
                      我们的目标是什么
                    </div>
                    <div style={{ clear: "both" }}></div>
                  </h4>
                  <section className={`${styles["panel-text"]}`}>
                    当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案、自由拖拽的可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col6}>
        <div className={styles["background-color"]}></div>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.left} id="col6-left">
              <div className={styles.headerTitle}>为什么要选择我们的服务</div>
              <div className={styles.desc}>
                当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。
              </div>
              <div className={styles.list}>
                <div className={styles.listItem}>
                  <div className={styles.title_image_inner}>
                    <i className="iconfont icon-duihao"></i>
                  </div>
                  <div className={styles.title_inner}>
                    当今最领先的响应式自助建站平台
                  </div>
                </div>
                <div className={styles.listItem}>
                  <div className={styles.title_image_inner}>
                    <i className="iconfont icon-duihao"></i>
                  </div>
                  <div className={styles.title_inner}>
                    我们的流线式网页布局设计方案和可视化图文内容编辑模式
                  </div>
                </div>
                <div className={styles.listItem}>
                  <div className={styles.title_image_inner}>
                    <i className="iconfont icon-duihao"></i>
                  </div>
                  <div className={styles.title_inner}>
                    网站制作和维护成为一件轻松惬意的事
                  </div>
                </div>
                <div className={styles.listItem}>
                  <div className={styles.title_image_inner}>
                    <i className="iconfont icon-duihao"></i>
                  </div>
                  <div className={styles.title_inner}>
                    我们的流线式网页布局设计方案
                  </div>
                </div>
                <div className={styles.listItem}>
                  <div className={styles.title_image_inner}>
                    <i className="iconfont icon-duihao"></i>
                  </div>
                  <div className={styles.title_inner}>
                    当今最领先的响应式自助建站平台
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.right} id="col6-right">
              <div className={styles.rightWrap}>
                <img
                  style={{ maxHeight: 400 }}
                  src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi8xNmEyZjk0NDZlMjk0ZWM2NTQ4OGQ1N2M0MmZlZTg3Yy5wbmc_p_p100_p_3D.png"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col7}>
        <div className={styles["background-color"]}></div>
        <div className={styles.container}>
          <div className={styles.row} id="col7-row">
            <div className={styles.headerTitle}>企业专属定制</div>
            <div className={styles.desc}>
              您可以尽情向我们的设计部门提出您的需求，大胆的选择您的主题色
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col8}>
        <div className={styles["background-color"]}></div>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.cardItem} id="col8-item1">
              <div className={styles.cardItem_wrap}>
                <div className={styles.title}>基础版</div>
                <div className={styles.desc_text}>
                  ￥59&nbsp;
                  <span
                    style={{
                      color: "#707070",
                      fontSize: 14,
                    }}
                  >
                    /年
                  </span>
                </div>
                <div className={styles.list}>
                  <p>
                    √&nbsp;<span>赠送国际域名&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>独立域名绑定&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>赠送备案服务号&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>网站安全防御&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>HTTPS安全证书&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>5秒最大同时访问&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>多种支付方式&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                </div>
                <div className={styles.btnWrap}>
                  <button>立即购买</button>
                </div>
              </div>
            </div>
            <div className={styles.cardItem} id="col8-item2">
              <div className={styles.cardItem_wrap}>
                <div className={styles.title}>基础版</div>
                <div className={styles.desc_text}>
                  ￥59&nbsp;
                  <span
                    style={{
                      color: "#707070",
                      fontSize: 14,
                    }}
                  >
                    /年
                  </span>
                </div>
                <div className={styles.list}>
                  <p>
                    √&nbsp;<span>赠送国际域名&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>独立域名绑定&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>赠送备案服务号&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>网站安全防御&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>HTTPS安全证书&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>5秒最大同时访问&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>多种支付方式&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                </div>
                <div className={styles.btnWrap}>
                  <button>立即购买</button>
                </div>
              </div>
            </div>
            <div className={styles.cardItem} id="col8-item3">
              <div className={styles.cardItem_wrap}>
                <div className={styles.title}>基础版</div>
                <div className={styles.desc_text}>
                  ￥59&nbsp;
                  <span
                    style={{
                      color: "#707070",
                      fontSize: 14,
                    }}
                  >
                    /年
                  </span>
                </div>
                <div className={styles.list}>
                  <p>
                    √&nbsp;<span>赠送国际域名&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>独立域名绑定&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>赠送备案服务号&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>网站安全防御&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>HTTPS安全证书&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>5秒最大同时访问&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                  <p>
                    √&nbsp;<span>多种支付方式&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </p>
                </div>
                <div className={styles.btnWrap}>
                  <button>立即购买</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col9}>
        <div className={styles["background-color"]}></div>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.headerWrap} id="col9-row">
              <div className={styles.headerTitle}>我们的团队</div>
              <div className={styles.desc}>
                您可以尽情向我们的设计部门提出您的需求，大胆的选择您的主题色
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col10}>
        <div className={styles["background-color"]}></div>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.listItem} id="col10-item1">
              <div className={styles.listItem_wrap}>
                <div className={styles.image}>
                  <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi82OGZiYzU0OTFiMzdjMTg5M2Y2Y2RkNDliZDg4MTI2Ni01MzN4NDAwLmpwZw_p_p100_p_3D_p_p100_p_3D.jpg" />
                </div>
                <div className={styles.title}>
                  <div className={styles.name}>张 迪特</div>
                  <div className={styles.duties}>设计师</div>
                </div>
                <div className={styles.icons}>
                  <ul className={styles.gallery_icons_list}>
                    <li className={styles.qq}></li>
                    <li className={styles.weixin}></li>
                    <li className={styles.youjian}></li>
                    <li className={styles.facebook}></li>
                  </ul>
                </div>
              </div>
            </div>
            <div className={styles.listItem} id="col10-item2">
              <div className={styles.listItem_wrap}>
                <div className={styles.image}>
                  <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi82OGZiYzU0OTFiMzdjMTg5M2Y2Y2RkNDliZDg4MTI2Ni01MzN4NDAwLmpwZw_p_p100_p_3D_p_p100_p_3D.jpg" />
                </div>
                <div className={styles.title}>
                  <div className={styles.name}>张 迪特</div>
                  <div className={styles.duties}>设计师</div>
                </div>
                <div className={styles.icons}>
                  <ul className={styles.gallery_icons_list}>
                    <li className={styles.qq}></li>
                    <li className={styles.weixin}></li>
                    <li className={styles.youjian}></li>
                    <li className={styles.facebook}></li>
                  </ul>
                </div>
              </div>
            </div>
            <div className={styles.listItem} id="col10-item3">
              <div className={styles.listItem_wrap}>
                <div className={styles.image}>
                  <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi82OGZiYzU0OTFiMzdjMTg5M2Y2Y2RkNDliZDg4MTI2Ni01MzN4NDAwLmpwZw_p_p100_p_3D_p_p100_p_3D.jpg" />
                </div>
                <div className={styles.title}>
                  <div className={styles.name}>张 迪特</div>
                  <div className={styles.duties}>设计师</div>
                </div>
                <div className={styles.icons}>
                  <ul className={styles.gallery_icons_list}>
                    <li className={styles.qq}></li>
                    <li className={styles.weixin}></li>
                    <li className={styles.youjian}></li>
                    <li className={styles.facebook}></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col11}>
        <div className={styles["background-media"]}></div>
        <div className={styles["background-color"]}></div>
        <div className={styles.container}>
          <div className={styles.row} id="col11-row">
            <div className={styles.headerTitle}>注册并获得折扣</div>
            <div className={styles.desc}>
              您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素
            </div>
            <div className={styles.btnWrap}>
              <button>免费试用</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Home;
